<template>
    <div id="app">
        <!--搜索框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!--根据周期进行选择-->
            <el-form-item label="新闻类别">
                <el-select v-model="formInline.id" no-data-text="第一周期" placeholder="请选择">
                    <el-option
                            v-for="item in periods"

                            :key="item.id"
                            :label="item.period"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="initTable()">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add()">三会一课</el-button>
            </el-form-item>
        </el-form>

        <el-table :header-cell-style="{textAlign: 'center'}" :data="tableData" border stripe :header-cell-class-name="'headerBg'">
            <el-table-column
                    align="center"
                    prop="uuid"
                    label="序号"
                    width="80">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="branch"
                    label="支部名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="number1"
                    label="支部大会">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="number2"
                    label="支委会议">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="number3"
                    label="党小组会">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="number4"
                    label="党课">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="状态">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.state==1" type="success">正在进行</el-button>
                    <el-button v-if="scope.row.state==0" type="danger">已经截止</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="padding: 10px 0">
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--添加-->
        <el-dialog
                title="添加三会一课任务"
                :visible.sync="dialogVisible"
                width="30%"
                @close="dialogClose">
            <!--:model绑定表单数据-->
            <el-form label-width="100px" :model="editForm" ref="addFormRef">
<!--                支部部门-->
                <el-form-item label="支部" prop="branchId">
                    <el-select v-model="editForm.branchId" placeholder="请选择">
                        <el-option
                                v-for="item in dept"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                周期-->
                <el-form-item label="周期" prop="periodId">
                    <el-select v-model="editForm.periodId" placeholder="请选择">
                        <el-option
                                v-for="item in periods"
                                :key="item.id"
                                :label="item.period"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="支部大会总数" prop="username">
                    <el-input v-model="editForm.num1"></el-input>
                </el-form-item>
                <el-form-item label="支委会议总数" prop="email">
                    <el-input v-model="editForm.num2"></el-input>
                </el-form-item>
                <el-form-item label="党小组会人数" prop="phonenum">
                    <el-input v-model="editForm.num3"></el-input>
                </el-form-item>
                <el-form-item label="党课人数"   prop="phonenum">
                    <el-input v-model="editForm.num4"></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" >取 消</el-button>
            <el-button type="primary" @click="add1()">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "meetingClass",
        data(){
            return{
                tableData: [],
                total: 0,
                currentPage: 1,
                pageSize: 5,
                title: "",
                date:[],
                dialogFormVisible: false,
                dialogFormVisible1: false,
                dialogFormVisible2:false,
                dialogVisible:false,
                content:"",
                value: '',
                editForm:{},
                addForm:{},
                NoticeSearchForm:{},
                formInline:{},
                periods:[],
                dept:[]
            }
        },
        created(){
            this.currentPage=1;
            this.initTable();
            this.periodInita();

        },
        methods: {
            dialogClose(){
                this.$refs.addFormRef.resetFields();
            },
            periods1(){
                this.$http.get("/system/period/list").then(result=>{
                    this.periods = result.data.data;

                });
                this.$http.get("/system/branch/list").then(result=>{
                    console.log("==============================================")
                    console.log(result)
                    this.dept = result.data.data;
                    console.log( this.dept)
                });

            },
            // branchs(){
            //     this.$http.get("/system/branch/list").then(result=>{
            //         console.log("==============================================")
            //         console.log(result)
            //         this.branchs = result.data.data;
            //         console.log( this.branchs)
            //     })
            // },

            add(){
                this.editForm={};
                this.dialogVisible=true;
                this.periods1();
                // this.branchs();
            },
            add1:function(){
                this.dialogVisible = false;
                this.$http.post("/system/meetingClass/add", this.editForm).then(result => {
                    this.initTable();
                    if(result.data.code == 200){
                        this.$message.success(result.data.message);
                    }
                    else{
                        this.$message.error(result.data.message);
                    }
                })
            },
            periodInita(){
                this.$http.post("/system/period/list").then(resp=>{
                    console.log(resp)
                    this.periods=resp.data.data;
                });
            },
            reset() {
                this.NoticeSearchForm={}
                this.initTable();
            },

            //分页
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                this.currentPage=val
                this.initTable();
            },
            //搜索查询
            onSubmit(){
                this.currentPage=1;
                this.initTable();
            },

            view(content) {
                console.log(content)
                this.content = content;
                this.dialogFormVisible1 = true;
            },
            initTable(){
                this.$http.post("/system/meetingClass/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.formInline).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.list;
                    this.total=resp.data.data.total;
                });
            },
        }
    }
</script>

<style scoped>
    .headerBg {
        background: #eee!important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>